<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field v-model="form.name" name="上报者姓名" label="上报者姓名" placeholder="上报者姓名"
        :rules="[{ required: true, message: '请填写上报者姓名' }]"/>
      <van-field v-model="form.phone" type="tel" name="上报者电话号码" label="上报者电话号码" placeholder="上报者电话号码"
        :rules="[{ required: true, message: '请填写上报者电话号码' }]"/>
      <van-field readonly clickable name="area" :value="form.residence" label="线索所在地区" placeholder="点击选择地址" 
        @click="showArea = true" :rules="[{ required: true, message: '请选择线索所在地区' }]"/>
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="localAreaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <van-field v-model="form.address" type="" name="线索详细地址" label="线索详细地址" placeholder="线索详细地址"
        :rules="[{ required: true, message: '请填写线索详细地址' }]"/>
      <van-field v-model="form.address" type="" name="详细描述" label="详细描述" placeholder="详细描述"
        :rules="[{ required: true, message: '请填写详细描述' }]"/>
      
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getDict, getAreaList } from '@/api/index'
import { areaList } from '@vant/area-data';
export default {
  name: 'ReportInto',
  data() {
    return {
      form: {},
      showArea: false,
      showPicker: false,
      showDestinationArea: false,
      showOccupation: false,
      showTimePicker: false,
      areaList,
      localAreaList: [],
      occupationLists: [],
      vehicleList: []
    }
  },
  mounted() {
    getDict('occupation_dict').then(res => {
      this.occupationLists = res.data
    })
    getDict('vehicle_dict').then(res => {
      this.vehicleList = res.data
    })
    this.getAreaList()
  },
  methods: {
    getAreaList(parentCode = '3708') {
      getAreaList({
        useLocale: true,
        parentCode
      }).then(res => {
        this.localAreaList = res.data
      })
    },
    onSubmit(values) {
      console.log('submit', values);
    },
    onConfirm(values) {
      console.log(values)
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
    //  onConfirm(value) {
    //   this.value = value;
    //   this.showPicker = false;
    // },
  },
}
</script>

<style>

</style>